<template>
	<div class="commonMain basicInf">
		<div class="coMain">
			<div>
				<div class="coMainIn">
					<div class="coTitle">基本信息</div>
					<div class="basicForm commonForm">
						<div class="bfSection">
							<div class="bfField inline">
								<label class="">小程序名称</label>
								<div class="fieldContent">
									<input :style="{borderColor: baseInfo.name.length > 15 ? '#f54d4f' : '' }" type="text" class="" name="appName" value="" maxlength="15" placeholder="" v-model="baseInfo.name">
								</div>
								<div v-show="baseInfo.name.length > 15" class="warn">最多输入15个字符</div>
							</div>
						</div>
						<div class="bfField">
							<label class="">小程序图标</label>
							<div class="fieldContent logoField">
								<div class="logo" v-if="baseInfo.image.imgUrl" onclick="document.getElementById('icon').click()" v-show="baseInfo.image.imgUrl" :style="{backgroundImage:'url(' + baseInfo.image.imgUrl + ')'}">
								</div>
								<div>
									<a onclick="document.getElementById('icon').click()">上传图片</a><br>
									<input id="icon" type="file" style="display:none;" accept="image/png,image/gif,image/jpeg" @change="uploadIcon" />
									<span class="fcHint">(推荐尺寸144*144，大小2M内)</span>
								</div>
							</div>
						</div>
						<div class="bfField">
							<label class="">小程序简介<span class="fcHint">(4-120字)</span></label>
							<div class="fieldContent">
								<textarea v-model="baseInfo.introduction" name="description" maxlength="140" minlength="4" rows="6" placeholder="简单描述下你的品牌"></textarea>
							</div>
						</div>
						<div class="bfField nomarginBot">
							<label class="">客服电话<span class="fcHint">(该号码为所有顾客来电询价的统一电话)</span></label>
							<div class="fieldContent">
								<input v-model="baseInfo.servicePhone" type="text" class="" name="phone" value="" maxlength="100" placeholder="输入电话号码">
							</div>
						</div>
						<div class="bfField bottom">
							<button type="button" class="bfBtn no-margin" @click="saveBasicInfo">保存</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="javascript/ecmascript6">
import fetch from '@/fetch'

export default {
  name: 'basicomponent',
  data () {
    return {
      baseInfo: {
      	infoId: 0,
        name: '',
        introduction: '',
        servicePhone: '',
        image: {}
      }
    }
  },
  methods: {
  	uploadIcon (e) {
  	  let file = e.target.files[0]
  	  let params = new FormData()
      if(!file || !file.name) {
      	console.log('用户取消上传')
      	return
      }
  	  params.append('file',file,file.name)
      params.append('chunk','0')
      let config = {
        headers:{'Content-Type':'multipart/form-data'}
      }
      fetch.send('/merchant/uploadImg', params, config).then(res => {
      	if (res.respCode === '000000') {
      	  this.baseInfo.image.imgUrl = res.result.img
      	  this.baseInfo.image.preImgUrl = res.result.preImg
      	} else {
      	  this.$noty.error(res.respDesc ? res.respDesc : '上传图标失败')
      	}
      })
  	},
  	getBaseInfo () {
  	  fetch.send('/merchant/getBaseInfo').then(res => {
          if (res.respCode === '000000') {
            this.baseInfo = res.result
            if (!this.baseInfo.image) {
              this.baseInfo.image = {
              	imgId: 0,
              	imgUrl: '',
              	preImgUrl: ''
              }
            }
          } else {
            this.$noty.error(res.respDesc ? res.respDesc : '请求基本信息失败')
        }
      })
  	},
  	saveBasicInfo () {
  	  if (this.baseInfo.name.length > 15 || !this.baseInfo.name || this.baseInfo.name.length === 0) {
  	  	this.$noty.warning('小程序名称不符合规范，长度在1-15位之间')
  	  	return
  	  }
  	  fetch.send('/merchant/saveBaseInfo', this.baseInfo).then(res => {
  	  	if (res.respCode === '000000') {
  	  	  this.getBaseInfo()
  	  	  this.$noty.success('基本信息保存成功')
  	  	  this.$emit('updateBaseInfo')
  	  	} else {
  	  	  this.$noty.error(res.respDesc ? res.respDesc : '保存基本信息失败')
  	  	}
  	  })
  	}
  },
  created () {
  	this.getBaseInfo()
  }
}
</script>

<style type="text/css" scoped>
	.commonMain{
		flex: 1 1 0%;
		float: none;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 0;
		width: auto;
	}
	.coMain{
		height: 100%;
	}
	.coMain>div{
		background: #fff;
		border-right: 1px solid #F2F2F2;
		height: 100%;
		overflow: auto;
	}
	.coMainIn{
		padding: 50px 30px;
	}
	.coTitle{
		color: #333;
		font-size: 20px;
		letter-spacing: 1px;
		margin-bottom: 30px;
		padding-bottom: 25px;
	}
	.bfSection{
		margin-bottom: 30px;
	}
	.bfField{
		margin-bottom: 30px;
		position: relative;
	}
	.bfField.inline{
		display: inline-block;
		margin-bottom: 0;
		margin-right: 15px;
	}
	.commonForm .bfField{
		margin-right: 20px;
	}
	.commonForm .bfField.inline{
		vertical-align: top;
		width: 450px;
	}
	.bfField label{
		color: #333;
		font-weight: 600;
		letter-spacing: 1px;
	}
	.bfField.inline label{
		display: block;
		margin-bottom: 10px;
	}
	.commonForm .bfField label{
		color: #333;
		display: inline-block;
		font-size: 16px;
		font-weight: 400;
		margin-bottom: 8px;
	}
	.commonForm .bfField>label{
		display: block;
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 10px;
	}
	.fieldContent{
		flex: 1 1 0%;
		line-height: 20px;
		text-align: left;
	}
	.bfField input[type=number], .bfField input[type=password], .bfField input[type=text], .bfField textarea{
		border: 1px solid #dedede;
		border-radius: 4px;
		color: #555;
		line-height: 22px;
		padding: 5px 8px;
		outline: none;
	}
	.commonForm .bfField.inline input[type=text],.commonForm .bfField.inline select{
		border-style: solid;
		border-size: 1px;
		box-sizing: border-box;
		width: 100%;
	}
	.commonForm .bfField.inline .warn{
		height: 18px;
	  	padding-left: 20px;
	  	margin-top: 6px;
	  	background: url('images/errIco.png') no-repeat left;
	  	background-size: 14px 14px;
	  	font-size: 14px;
	  	color: #f54d4f;
	  	line-height: 18px;
	}
	.commonForm .fieldContent.logoField{
		align-items: center;
		display: flex;
	}
	.commonForm .fieldContent.logoField .logo{
		width: 70px;
		height: 70px;
		border-radius: 35px;
		cursor: pointer;
		margin-right: 15px;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url('images/logo.png');
	}
	.fieldContent.logoField a{
		font-size: 16px;
		color: #298beb;
	}
	.fieldContent .fcHint{
		line-height: 1.2;
	}
	.commonForm .fcHint{
		color: #8f8f8f;
		font-size: 14px;
		margin-top: 15px;
	}
	.fieldContent textarea,.fieldContent input[type="text"]{
		width: 100%;
		box-sizing: border-box;
		resize: none;
	}
	.commonForm .fieldContent textarea,.commonForm .fieldContent input[name="phone"]{
		width: 450px;
	}
	.bfField.nomarginBot{
		margin-bottom: 0;
	}
	.bfField.bottom{
		margin-top: 50px;
	}
	.bfBtn{
		width: 240px;
		height: 48px;
		color: #fff;
		border-radius: 4px;
		background: #F54D4F;
		border: none;
		font-size: 18px;
		letter-spacing: 3px;
		line-height: 48px;
		margin: 0;
		position: relative;
		outline: none;
		cursor: pointer;
	}
</style>
